<script setup>
import { ref , reactive} from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import emitter from "../../utils/mitt";
import lib from "@ant-design/icons-vue";
// import data from "/src/data/index.js";
const router = useRouter();
const total = ref(0);
const tags = ref("");
// const ListData = ref([]);
// for (let [key, value] of Object.entries(data)) {
//   ListData.value.push({
//     title: key,
//     data: value,
//   });
// }
emitter.on("getTags", ({ tag }) => {
  init(tag);
  tags.value = tag;
  pagination.page = 1
  console.log("HomeContent接收到得About发送得数据了：", tag);
});
const spinning = ref(false);
const openDetails = (id, type, item) => {
  router.push(`/details/${id}?type=${type}`);
  localStorage.setItem("item", JSON.stringify(item));
};
const pagination = reactive({
  page: 1,
  pageSize: 100,
});
const library = ref([]);
const init = (tag = "geo") => {
  spinning.value = true;
  axios.get(`/makeapie?page=1&per_page=100&builtinTags=~${tag}`).then((res) => {
    if (res.status == 200) {
      total.value = res.data.total;
      library.value = res.data.data.map((item) => ({
        ...item,
        thumbnailURL: JSON.parse(item.thumbnailURL)[0].url,
      }));
      spinning.value = false;
    }
    console.log(res);
  });
};
init();
const toLoad = () => {
  if (library.value.length >= total.value) return;
  pagination.page++
  spinning.value = true;
  axios
    .get(
      `/makeapie?page=${pagination.page}&per_page=${pagination.pageSize}&builtinTags=~${tags.value}`
    )
    .then((res) => {
      if (res.status == 200) {
        total.value = res.data.total;
        library.value = [
          ...library.value,
          ...res.data.data.map((item) => ({
            ...item,
            thumbnailURL: JSON.parse(item.thumbnailURL)[0].url,
          })),
        ];
        spinning.value = false;
      }
      console.log(res);
    });
};
</script>
<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div>
      <!-- <template v-for="(item, index) in ListData" :key="index">
      <h2 :id="item.title">{{ item.title }}</h2>
      <div class="flex">
        <div class="item" v-for="(i, count) in item.data" :key="count">
          <div @click="openDetails(i.id,item.title)">
            <img :src="i.imgs" alt="" />
          </div>

          <h3 class="title">{{ i.title }}</h3>
          <span class="tip">{{ i?.tip }}</span>
        </div>
      </div>
    </template> -->

      <div class="flex">
        <div class="item" v-for="(i, count) in library" :key="count">
          <div @click="openDetails(i.id, i.title, i)">
            <img v-img="i.thumbnailURL" alt="" />
          </div>

          <h3 class="title">{{ i.title }}</h3>
          <span class="tip">{{ i?.description || i.createTime }}</span>
        </div>
      </div>
      <div v-if="library.length > 0" class="footer">
        <a @click="toLoad">{{
          library.length >= total ? "已经到底了" : "点击加载更多"
        }}</a>
      </div>
    </div>
  </a-spin>
</template>
<style scoped>
.footer {
  text-align: center;
  padding-top: 20px;
  margin: 20px 0;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.item {
  width: 250px;
  height: 240px;
  margin-right: 20px;
  margin-top: 30px;
}
.item > div {
  overflow: hidden;
}
.item img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(0 0 0 / 5%);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.item img:hover {
  transform: scale(1.2);
}
.item .title {
  color: #293c55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 10px 2px 10px;
  margin: 0;
  display: block;
  font-size: 14px;
  text-align: left;
}
.item .tip {
  font-size: 12px;
  text-align: left;
  color: #aaa;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 3px 0 0 0;
  padding-left: 10px;
}
</style>
